<template>
  <div v-if="Object.keys(cityInfo).length !== 0" class="cont">
    <ul class="list9">
      <li @click="$emit('handlerCity',item)" class="item9" v-for="(item,index) in cityInfo.hotCities" :key="item.id">
        {{item.name}}
      </li>
    </ul>
    <van-index-bar :index-list="keys" >
      <template v-for="(title,index)  in keys" >
        <van-index-anchor :index="title" />
        <van-cell @click="$emit('handlerCity',item)" :title="item.name" v-for="(item,index) in cityInfo[title]" />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import { IndexBar, IndexAnchor, Cell } from "vant";
export default {
  name: "CityList",
  components: {
    [IndexBar.name]: IndexBar,
    [IndexAnchor.name]: IndexAnchor,
    [Cell.name]: Cell
  },
  props: {
    cityInfo: {
      type: Object,
      default: {}
    },
    keys: {
      type: Array,
      default: []
    }
  }
};
</script>

<style scoped>
.cont{
  /* height: 100vh; */
  position: relative;
}
.list9 {
  padding: 0 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.item9 {
  box-sizing: border-box;
  width: 30%;
  margin: 0 10px 10px 0;
  padding: 10px;
  text-align: center;
  background: #f1f1f1;
}
.van-index-bar__sidebar{
  position: absolute !important; 
  top:260px;
  right: 10px;
/*   transform: scaleY(-50%); */
  z-index: 9999;
}
.van-index-anchor{
background-color: #fff;
}
</style>